@use "sass:color";
@import "codemirror/theme/xq-light";

// Global
$badge-bg:                 rgba($theme-base, 0.1);

// Sidebar
$sidebar-list-icons:       $theme-primary;

// Editor
$tabs-heading:             rgba($theme-base, 0.08);
$tab-link:                 color.adjust($theme-bg, $lightness: -4%);
$codemirror-hint-bg:       color.adjust($theme-bg, $lightness: -2%);

// Table Editing
$row-highlight:            color.adjust($query-editor-bg, $lightness: -3%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: -10%);
$row-add:                  color.mix($query-editor-bg, $brand-success, 70%);
$row-delete:               #FC8A87;
$row-error:                color.mix($query-editor-bg, $brand-danger, 30%);

$cell-edited:              #EDDFA1;
$cell-error:               $row-error;
$cell-success:             $row-add;

// Statusbar
$editor-statusbar:         rgba($theme-base, 0.035);

@mixin cell-shadow {
  box-shadow: inset 1px 0 rgba(white, 0.4),
              inset 0 -1px rgba(white, 0.4);
}

// Base Styles
// -----------------------------------------
& {
  background: $theme-bg;
  color: $text;
}
.material-icons {
  font-weight: 600;
}
select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='rgba(0,0,0, 0.87)'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 98% 60% transparent !important;
  option {
    &:hover {
      color: white;
      box-shadow: 0 0 10px 100px $brand-info inset;
    }

    &:checked {
      color: inherit;
      font-weight: bold;
    }
    &:disabled, &:disabled:hover, &:disabled:focus {
      background: transparent!important;
      color: $text-lighter!important;
    }
  }
}
::selection {
  background: rgba($brand-info, 0.25);
}

x-buttons {
  > x-button {
    &.btn-primary {
      &[menu] {
        border-left: 1px solid rgba(white, 0.35);
        &:hover {
          border-left: 1px solid rgba(white, 0.35);
        }
      }
    }
  }
}
.btn {
  box-shadow: inset 0 0 0 1px rgba($theme-base, 0.035);
}
.btn-link, .btn-fab {
  box-shadow: none;
}
.btn-flat {
  background: rgba($theme-base, 0.08);
}
.text-primary {
  color: $theme-primary!important;
}
.list-group {
  .list-item-btn {
    .actions {
      i {
        color: $text-light;
      }
      .btn-fab.pinned {
        i {
          color: $text-dark;
        }
      }
    }
  }
}
.badge {
  background: $badge-bg;
  color: $text-dark;
  &.badge-info {
    color: white;
  }
}
.text-danger {
  color: $brand-danger!important;
}
.connection-main {
  .card-flat {
    background: rgba($theme-base, 0.035);
  }
}
.connection-interface {
  .page-content:before {
    top: 0;
  }
}

// File-Menu
// ---------------------------------------
.flyout-nav {
  > .menu-bar {
    .top-menu-item {
      > a {
        > .label {
          color: $text-light;
        }
      }
    }
  }
}

// Connection Label
// -----------------------------------------
.connection-label {
  &.connection-label-color-yellow {
    background-color: color.adjust($theme-primary, $lightness: -4%);
    &:checked {
      background-color: color.adjust($theme-primary, $lightness: -4%);
    }
  }
}

// Sidebar
// ---------------------------------------
.advanced-connection-settings {
  background: rgba($theme-base, 0.05);
}
#sidebar {
  position: relative;
  .filter {
    .filter-actions {
      x-button {
        &.btn-fab {
        margin-right: 2px;
        line-height: 22px;
        height: 22px;
        width: 22px;
        min-width: 22px;
        border-radius: 22px;
        border: 0;
        &.active {
          background: rgba($theme-base, 0.1);
          .material-icons {
            color: $brand-info;
          }
        }
      }

      }
    }
  }
  .global-items {
    .nav-item.selectable {
      &:hover {
        &:before {
          background: rgba($theme-base, 0.38);
        }
      }
      &:hover, &.active, &.active:hover {
        &:before {
          width: 2px;
        }
      }
    }
  }
}
.list-heading {
  .sub {
    .badge {
      &.active {
        color: $brand-info;
      }
    }
  }
}
.item-icon {
  color: color.adjust($theme-primary, $lightness: -6%);
}

// Editor
// ---------------------------------------
.core-tabs {
  .tabs-header {
    background: $tabs-bg;
  }
  .nav-tabs {
    .nav-link {
      background: $tab-link;
      &.active {
        background: $query-editor-bg;
        .tab-action {
          background: linear-gradient(
            90deg,
            rgba($query-editor-bg,0) 0%,
            rgba($query-editor-bg,1) 20%
          );
        }
      }
    }
    .tab-action {
      top: 1px;
      right: 0;
      bottom: 1px;
      border-radius: 0 6px 0 0;
      background: linear-gradient(
        90deg,
        rgba($tab-link,0) 0%,
        rgba($tab-link,1) 20%
      );
    }
    .tab-close {
      .material-icons {
        color: $text-lighter;
        &.close {
          color: $text-dark;
        }
      }
    }
  }
}

// Tabulator
// -------------------------------
.tabulator-tableholder {
  .tabulator-table {
    .tabulator-row {
      &.tabulator-row-even {
        &.inserted,
        &.inserted:hover {
          background: $row-add!important;
          --row-hover-bg-color: rgba($theme-base, 0.05);
        }
        &.edit-error {
          background: $row-error!important;
        }
      }
      &.edit-error {
        background: $row-error !important;
      }
      .tabulator-cell {
        &.edited,
        &.edit-error,
        &.edit-success {
          @include cell-shadow;
        }
        &.edited {
          background: $cell-edited;
          &:hover {
            background: color.adjust($cell-edited, $lightness: -5%);
            --row-hover-bg-color: color.adjust($cell-edited, $lightness: -5%);
          }
        }
        &.edit-error {
          background: $cell-error;
          &:hover {
            background: color.adjust($cell-error, $lightness: -5%);
          }
        }
        &.edit-success {
          background: $cell-success;
          &:hover {
            background: color.adjust($cell-success, $lightness: -5%);
          }
        }
        &.foreign-key-button {
          .material-icons {
            &:hover {
              color: $text-dark;
            }
          }
        }
        .null-value {
          color: $text-light;
        }
      }
    }
  }

}
.tabulator {

  .tabulator-loader {
    .tabulator-loader-msg {
      &.tabulator-loading {
        background-color: white;
      }

    }
  }

  .tabulator-header {
    .tabulator-col {
      &.foreign-key {
        &:before {
          color: color.adjust($brand-primary, $lightness: -6%);
        }
      }
      .badge {
        color: $text-light;
      }
    }
  }
}

// Table Builder
// -------------------------
.table-builder .table-builder-wrap,
.table-properties .table-properties-wrap {
  .tabulator-row {
    &.inserted {
      background: $row-add!important;
    }
  }
}
.table-builder {

  .table-builder-header {
    .form-group {
      label {
        color: $text-light;
      }
    }
  }
}

// Schema Builder
// ----------------------------------
.schema-builder {

  // Schema Header
  .schema-header {
    .table-title {
      color: $text-light;
    }
  }

  // Tabulator Header Row
  .tabulator {
    .tabulator-header {
      .tabulator-col {
        .tabulator-col-content {
          .tabulator-col-title {
            color: $text-lighter;
          }
        }
      }
    }
  }

  // Field Rows
  .tabulator-row {
    .tabulator-cell {
      color: $text-dark;
      &.tabulator-editing {
        box-shadow: inset 0 1px $theme-base;
      }
      &.no-edit-highlight {
        &.tabulator-editing {
          input {
            &[type="checkbox"]:active,
            &[type="checkbox"]:checked,
            &[type="checkbox"]:checked:active {
              background: rgba($theme-base, 0.5)!important;
              color: $theme-bg!important;
            }
          }
        }
        &.edited {
          input {
            &[type="checkbox"]:active,
            &[type="checkbox"]:checked,
            &[type="checkbox"]:checked:active {
              &:after {
                color: white!important;
              }
            }
          }
        }
      }
      &.read-only {
        input[type="checkbox"] {
          &:active,
          &:checked,
          &:checked:active {
            &:after {
              color: $theme-base!important;
            }
          }
        }
        .tabulator-bks-checkbox {
          input {
            &:after {
              color: $theme-primary;
            }
          }
          &.editable {
            input[type="checkbox"] {
              box-shadow: inset 0 0 0 2px rgba($theme-base, 0.2)!important;
              cursor: pointer!important;
              &:active,
              &:checked,
              &:checked:active {
                background: $theme-base!important;
                &:after {
                  color: $theme-bg!important;
                }
              }
              &:focus {
                box-shadow: inset 0 0 0 2px $theme-base!important;
              }
            }
          }
        }
      }

      .material-icons.clear {
        color: $text-light;
        &:hover {
          color: $text-dark;
        }
      }

      // Remove Cell
      &.remove-btn {
        .material-icons {
          color: $text-lighter;
          &:hover {
            color: $text-dark;
          }
        }
      }
      .null-value {
        color: $text-lighter;
      }
    }
  }

  // Resize Handle
  .tabulator-row {
    .tabulator-frozen {
      &.tabulator-row-handle {
        .tabulator-row-handle-box {
          .tabulator-row-handle-bar {
            background: $border-color;
          }
        }
      }
    }
  }
  .tabulator-row {
    &.tabulator-moving {
      background: color.adjust($theme-bg, $lightness: 15%)!important;
    }
  }
}


// CodeMirror
// ----------------------------------
.CodeMirror-hints {
  background: color.adjust($theme-bg, $lightness: -5%)!important;
  li {
    &.CodeMirror-hint-active {
      background: $brand-info;
      color: white;
    }
  }
}

.cm-s-monokai {
  span {
    .cm-string {
      color: $brand-success;
    }
  }
  .CodeMirror-line {
    .cm-number {
      color: $brand-warning;
    }
  }
}


.cm-s-monokai {
  font-weight: 500;
  span.cm-keyword {
    color: $brand-pink;
  }
  span.cm-variable-2 {
    color: $brand-secondary;
  }
  div.CodeMirror-selected {
    background: rgba($theme-secondary, 0.25);
  }
  .CodeMirror-linenumber {
    color: rgba($theme-base, 0.25);
  }
  .CodeMirror-line .cm-number {
    color: $brand-warning;
  }
  .CodeMirror-line .cm-string {
    color: color.adjust($brand-success, $lightness: -20%);
  }
  .CodeMirror-cursor {
    border-color: $text-dark;
  }
  span.cm-bracket {
    color: $text;
  }
}

// Noty
.noty_theme__mint.noty_type__success {
  color: color.adjust($brand-success, $lightness: -5%);
}

// Switch
x-switch {
  color: $theme-primary;
}

// Table Properties
// -------------------------------
.table-properties {
  .nav-pills {
    .nav-pill {
      &.active {
        color: $theme-secondary;
        box-shadow: inset 0 -2px $theme-secondary;
      }
    }
  }
}

// Quicksearch
.quicksearch {
  .quicksearch-bg {
    background: rgba(color.adjust($theme-bg, $lightness: -8%), 0.5);
  }
}

.BksTextEditor {
  font-weight: 500;
}
